<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div id="app">

    <!-- 修饰符 -->
    <!-- 1. .stop 停止冒泡 -->
    <div @click="divClick">
        <p>div内容</p>

        <!-- Vue使用修饰符阻止冒泡 事件-->
        <button @click.stop="btnClick">按钮</button>
    </div>

    <!-- 2. prevent 手动提交 阻止自动提交 -->
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick">
    </form>

    <!-- 3. 监听某个键盘上某个键点击  keyup-->
    <!-- 回车修饰符 .enter -->
    <input type="text" @keyup.enter="keyUp">

    <!-- 4. .once修饰符使用  只触发一次-->
    <button @click.once="btn2Click">按钮</button>


</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el : "#app",
        data : 
        {
            
        },
        methods : 
        {
            btnClick()
            {
                console.log("按钮点击");
            },
            divClick()
            {
                console.log("div点击");
            },
            submitClick()
            {
                console.log("手动提交事件");
            },
            keyUp()
            {
                console.log("按下键盘事件触发");
            },
            btn2Click()
            {
                console.log("按钮点击");
            },
        }

    })
</script>
    
</body>
</html>